<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="container">

    <div class="row" style="margin-top: 60px">
        <div class="col-md-3" th:each="book : ${bookList.records}">
            <div>
                <img width="200px" height="200px"
                     th:src="${book.img == null} ? '/img/default_book.png' : ${#strings.replace(book.img,'d:/bms/book','/path')}">
                <div>
                    <p class="card-text">[[${book.title}]]</p>
                </div>
            </div>
        </div>
    </div>


    <div>
        <nav aria-label="Page navigation example" style="display: inline-block">
            <ul class="pagination">
                <li class="page-item">
                    <!-- thymeleaf link传递参数 -->
                    <a class="page-link" th:href="@{'/theme/' + ${themeId}(pn=${bookList.current} - 1)}">上一页</a>
                </li>
                <!-- thymeleaf 表达式语法 -->
                <li th:class="${num == bookList.current?'page-item active':'page-item'}"
                    th:each="num : ${#numbers.sequence(1, bookList.pages)}">
                    <a class="page-link" th:href="@{'/theme/' + ${themeId}(pn=${num})}">[[${num}]]</a>
                </li>
                <li class="page-item">
                    <a class="page-link" th:href="@{'/theme/' + ${themeId}(pn=${bookList.current} + 1)}">下一页</a>
                </li>
            </ul>
        </nav>

        <span style="float:right;">当前第 [[${bookList.current}]] 页 总计 [[${bookList.pages}]] 页 共 [[${bookList.total}]] 条</span>

    </div>
</div>

</body>
</html>